<template>
	<div id="search">
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div class="mui-content-padded">
				<!--<div>
					<img src="../../static/img/icon/diary_icon/search@2x.png"/>
				</div>-->
				<div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" v-model="value" placeholder="请输入关键字">
				</div>
			</div>
			<div style="width: 40px;" @click="search">搜索</div>
		</div>
		<div class="header-null"></div>
		<div class="mui-content mui-scroll-wrapper" id="searchScroll">
			<div class="mui-scroll">
				<div class="list">
					<div class="item" v-for="(item, index) in list" @tap="route('forumDetail', item.note_id)">
						<div class="left">
							<div class="title">
								{{item.note_name}}
							</div>
							<div>
								{{item.note_content}}
							</div>
							<div class="bottom">
								<div>
									<img src="../../static/img/icon/find_icon/comment@3x.png"/>
									<span>{{item.comment_count}}</span>
								</div>
								<div>
									<img src="../../static/img/icon/find_icon/collection@3x.png"/>
									<span>{{item.collect_count}}</span>
								</div>
								<div>
									<img src="../../static/img/icon/find_icon/heart_luntan@3x.png"/>
									<span>{{item.like_count}}</span>
								</div>
							</div>
						</div>
						<div class="right">
							<img :src="item.img_path"/>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="list-null" v-if="list.length == 0">
			查无数据
		</div>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	export default {
		data() {
			return {
				value: '',
				list: [],
				page: 1,
				lastPage: 1
			}
		},
		mounted() { //初始化
			mui('.mui-input-row input').input(); 
			this.$nextTick(() => {
				mui.init({
	                pullRefresh: {
	                    container: '#searchScroll',
	                    up: {//上拉加载
	                    	height: 40,
	                        auto:false,//可选,默认false.自动上拉加载一次
	                        contentrefresh: '正在加载...',
	                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	                        callback: this.pullupRefresh
	                    },
						down: {                        
							contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
							auto: false,//可选,默认false.首次加载自动下拉刷新一次                        
							callback: this.pulldownRefresh                   
						}
	                }
	            });
			})
		},
		methods: {
			search() { //搜索
				this.$store.state.isLoading = true
				getData('/note/searchNote', {
					token: sessionStorage.token,
					page: 1,
					findType: 1,
					key: this.value
				}).then(d => {
					this.$store.state.isLoading = false
					this.list = d.pd.list
					this.lastPage = d.pd.lastPage
				}).catch(err => {
					this.$store.state.isLoading = false
					console.log(err)
				})
			},
			pullupRefresh() { //上拉加载
				if(this.lastPage != this.page) {
					getData('/note/searchNote', {
						token: sessionStorage.token,
						page: this.page++,
						findType: 1,
						key: this.value
					}).then(d => {
						mui('#searchScroll').pullRefresh().endPullupToRefresh();
						this.list = this.list.concat(d.pd.list)
					}).catch(err => {
						console.log(err)
					})
				} else {
					mui('#searchScroll').pullRefresh().endPullupToRefresh(true);
				}
			},
			pulldownRefresh() { //下拉刷新
				getData('/note/searchNote', {
					token: sessionStorage.token,
					page: 1,
					findType: 1,
					key: this.value
				}).then(d => {
					mui('#searchScroll').pullRefresh().endPulldownToRefresh();
					this.list = d.pd.list
					this.lastPage = d.pd.lastPage
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	#search { 
		background: #fff;
	}
	
	#searchScroll {
		margin-top: 50px;
	}
	
	.header {
		
		div:nth-child(2) {
			border-radius: 5px;
			/*background: #E5E5E5;*/
			align-items: center;
			display: flex;
			
			div:nth-child(1) {
				padding: 0 0 0 10px;
				display: flex;
				align-items: center;
			}
			
			input {
				/*background: #E5E5E5;*/
				border: none;
				height: 30px;
				margin-bottom: 0;
				color: #000;
				font-weight: initial;
			}
			
			img {
				width: 15px;
				height: 15px;
			}
		}
	}
	
	.mui-search.mui-active:before {
		left: 15px;
		color: #000;
	}
	
	.mui-search:before {
		top: 75%
	}
	
	.list {
		background: #fff;
		
		.item {
			display: flex;
			border-bottom: 1px solid #eee;
			padding: 10px;
			
			.left {
				flex: 1;
				margin-right: 10px;
				position: relative;
				
				div {
					font-size: 12px;
					color: #7B7B7B;
					display: flex;
					align-items: center;	
				}
				
				.title {
					font-size: 14px;
					font-weight: bold;
					color: #000;
				}
				
				.bottom {
					position: absolute;
					bottom: 0;
					width: 100%;
					color: #000;
					
					div {
						margin: 0 5px;
					}
					
					img {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
			}
			
			.right {
				display: flex;
				
				img {
					width: 80px;
					height: 80px;
				}
			}
		}
	}
	
	.list-null {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 20%;
		width: 100%;
		color: #7b7b7b;
		font-size: 14px;
	}
</style>